<template>
	<echartBox title="表具统计" width="580px" height="362px">
		<div class="echart-show" ref="chart"></div>
	</echartBox>
</template>

<script>
import * as echarts from "echarts";
import echartBox from "../echart-box.vue";

export default {
	name: "Page2ItemBox6",
	components: {
		echartBox,
	},
	props: {
		chartData: {
			type: Array,
			required: true,
			default: () => []
		}
	},
	methods: {
		// 初始化图表的统一方法名
		initChart() {
			this.buildMeterChart();
		},
		// 构建表具统计饼图
		buildMeterChart() {
			let _labelList = this.chartData.map((item) => item.name);
			let _valueList = this.chartData.map((item) => item.value);
			let chartContainer = this.$refs.chart;
			if (!chartContainer || chartContainer.clientWidth === 0 || chartContainer.clientHeight === 0) {
				console.warn('Chart container not ready, skipping chart initialization');
				return;
			}
			let myChart = echarts.init(chartContainer);

			const option = {
				backgroundColor: "transparent",
				grid: {
					left: "8%",
					right: "8%",
					bottom: "1%",
					top: "16%",
					containLabel: true,
				},
				xAxis: {
					type: "value",
					axisLine: {
						show: true,
						lineStyle: {
							color: "#3c4170",
						},
					},
					axisTick: {
						show: false,
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: "rgba(255, 255, 255, 0.1)",
							type: "dashed",
						},
					},
					axisLabel: {
						color: "#fff",
						fontSize: 15,
					},
				},
				yAxis: {
					type: "category",
					data: _labelList,
					axisLine: {
						show: true,
						lineStyle: {
							color: "#3c4170",
						},
					},
					axisTick: {
						show: false,
					},
					axisLabel: {
						color: "#fff",
						fontSize: 17,
						margin: 18,
					},
				},
				series: [
					{
						type: "bar",
						data: _valueList.map(value => ({
							value: value,
							itemStyle: {
								color: {
									type: "linear",
									x: 0,
									y: 0,
									x2: 1,
									y2: 0,
									colorStops: [
										{
											offset: 0,
											color: "#0099cc",
										},
										{
											offset: 0.5,
											color: "#00d4ff",
										},
										{
											offset: 1,
											color: "#66e8ff",
										},
									],
								},
								shadowColor: "#00d4ff",
								shadowBlur: 8,
							},
						})),
						barWidth: 27,
						label: {
							show: true,
							position: "right",
							formatter: "{c}",
							color: "#00d4ff",
							fontSize: 17,
							fontWeight: "bold",
						},
						emphasis: {
							itemStyle: {
								shadowBlur: 15,
								shadowColor: "#00d4ff",
							},
						},
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(0, 63, 116, 1)'
                        }
					},
				],
			};

			myChart.setOption(option);
		},
	},
};
</script>

<style scoped lang="scss">
.echart-show {
	width: 100%;
	height: 100%;
}
</style>